const textContainer = document.querySelector('.text-container')
const textElem = document.querySelector('.text')
const cursor = document.querySelector('.cursor')

async function autoAppend() {
  function delay(duration) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve()
      }, duration)
    })
  }

  function transfer(text) {
    let result = text
      .split('\n')
      .map((t) => `<p>${t}</p>`)
      .join('')
    return result
  }
  const content = ` 拦截器： 没有授权token 禁止访问 返回登录页
         加验证码 ： 文字 图片
         令牌机制： token -> 登录有效性， 接口请求添加token 
                   唯一的校验码， 每次请求都携带token， token过期 reftoken
         登录限制： 登录次数限制， 登录时间限制， 登录ip限制
         定期修改账户密码
         数据过滤
         所有数据传输时加密
         关闭不需要的端口和服务`

  for (let i = 0; i < content.length; i++) {
    let text = content.slice(0, i)
    let result = transfer(text)
    textElem.innerHTML = result
    updateCursor()
    await delay(300)
  }
}

autoAppend()

function getLastTextNodes(node) {
  if (node.nodeType === Node.TEXT_NODE) {
    return node
  }
  for (let i = node.childNodes.length - 1; i >= 0; i--) {
    const textNode = getLastTextNodes(node.childNodes[i])
    if (textNode) {
      return textNode
    }
  }
  return null
}

function updateCursor() {
  // 1. 找到最后一个文本节点
  const lastTextNodes = getLastTextNodes(textElem)
  // 2. 添加一个文本
  const newText = document.createTextNode('|')

  // 3. 获取到添加文本的位置
  if (lastTextNodes) {
    lastTextNodes.after(newText)
  } else {
    textElem.appendChild(newText)
  }
  // 4. 根据位置设置光标的位置
  const range = document.createRange()
  range.setStart(newText, 0)
  range.setEnd(newText, 0)
  const containerRect = textContainer.getBoundingClientRect()
  const rect = range.getBoundingClientRect()
  const x = rect.left - containerRect.left
  const y = rect.top - containerRect.top
  cursor.style.left = x + 'px'
  cursor.style.top = y + 4 + 'px'
  newText.remove()
}
